<template>
  <div v-if="menu.children && menu.children.length > 0">
    <!-- 子菜单项 -->
    <el-sub-menu :index="menu.path">
      <template #title>
        <el-icon v-if="menu.icon && iconMap[menu.icon]">
          <component :is="iconMap[menu.icon]" />
        </el-icon>
        <span>{{ menu.name }}</span>
      </template>
      <!-- 递归渲染子菜单 -->
      <template v-for="child in menu.children" :key="child.path">
        <PermissionWrapper :requires-admin="child.meta?.requiresAdmin">
          <MenuItem 
            :menu="child"
            :icon-map="iconMap"
            :collapse="collapse"
          />
        </PermissionWrapper>
      </template>
    </el-sub-menu>
  </div>
  <div v-else>
    <!-- 叶子菜单项 -->
    <el-menu-item :index="menu.path">
      <el-icon v-if="menu.icon && iconMap[menu.icon]">
        <component :is="iconMap[menu.icon]" />
      </el-icon>
      <template #title>
        <span>{{ menu.name }}</span>
      </template>
    </el-menu-item>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
interface MenuItem {
  id: string
  name: string
  path: string
  icon?: string
  children?: MenuItem[]
  meta?: {
    requiresAdmin?: boolean
  }
}

interface Props {
  menu: MenuItem
  iconMap: Record<string, any>
  collapse?: boolean
}

defineProps<Props>()
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>